<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="IP" prop="ip">
        <el-input v-model="queryParams.ip" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="queryParams.remark" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"><span style="color: white; font-weight: bold; ">搜索</span></el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button plain size="mini" @click="openForm">添加</el-button>
        <el-button type="danger" plain size="mini" @click="handleDeleteAll">清空所有IP</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="10"><span class="tips">在被访问时系统将自动根据爬虫IP库和用户设备情况将目标的IP列入黑名单</span></el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="#" align="center" prop="id" min-width="10%" />
      <el-table-column label="IP" align="center" prop="ip" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="URL" align="center" prop="url" />
      <el-table-column label="记录时间" align="center" prop="create_time" width="200" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button size="small" plain type="danger" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.per_page" @pagination="getList" />

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form label-position="left" ref="form" :model="form" :rules="rules" label-width="50px">
        <el-form-item label="IP" prop="ip">
          <el-input v-model="form.ip" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { queryBlackLogList, deleteById, deleteAll, addLogInfo } from "@/api/logs/blacklist";
export default {
  components: {
  },
  name: "blacklistList",
  dicts: ["sys_normal_disable"],
  data() {
    // 自定义验证IP的规则
    var validateIP = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('IP地址不能为空'));
      }
      // 正则表达式匹配IP地址
      const regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
      if (!regex.test(value)) {
        callback(new Error('请输入正确的IP地址格式'));
      } else {
        callback();
      }
    };
    return {
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表单参数
      form: {
        ip: undefined,
        remark: '手动添加'
      },
      // 表单校验
      rules: {
        ip: [
          {
            required: true,
            message: "IP不能为空",
            trigger: "blur",
          },
          { validator: validateIP, trigger: 'blur' }
        ]
      },
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        page: 1,
        per_page: 10,
        ip: undefined,
        remark: undefined,
      },
      dataList: [],
      title: '添加',
      open: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleDelete() { },
    getList() {
      //   this.loading = true;
      queryBlackLogList(this.queryParams).then((response) => {
        this.dataList = response.results;
        this.total = response.total;
        //   this.loading = false;
      });
    },
    handleDelete(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById({ id: row.id }).then((response) => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
      })
    },
    handleDeleteAll() {
      //   this.loading = true;
      this.$confirm('是否确认删除全部?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAll().then((response) => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addLogInfo(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    // 取消按钮
    cancelForm() {
      this.open = false;
      this.reset();
    },
    openForm() {
      this.open = true;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ip: undefined,
        remark: '手动添加'
      };
      this.resetForm("form");
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;

  .label {
    width: 40%;
  }

  .value {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    text-overflow: ellipsis;

    .btn {
      border-style: dashed;
    }
  }
}

.detail-view {
  padding: 0 20px;

  .ext-table {
    font-size: 14px;

    ::v-deep {
      table {
        width: 100%;
      }

      svg {
        display: none;
      }

      a {
        pointer-events: none;
      }
    }
  }

  .flex {
    // display: flex;
  }

  .card-img {
    width: 425px;
    height: 270px;
    background: url("../../../assets/images/card.png");
    background-size: 100%;
    // transform: scale(0.9);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 24px;
    box-sizing: border-box;
    color: #fff;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }

    .card-chip {
      width: 60px;
      height: 49px;
    }

    .card-type {
      height: 45px;
    }

    .card-number {
      height: 40px;
      font-size: 27px;
      font-family: Source Code Pro, monospace;
      margin-bottom: 40px;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-info {
      margin-right: 10px;

      .info-name {
        opacity: 0.75;
        font-size: 13px;
        margin-bottom: 10px;
      }

      .info-label {
        font-size: 18px;
        font-family: Source Code Pro, monospace;
      }
    }

    .b-right {
      display: flex;
    }
  }

  .form-item {
    .label {
      margin-bottom: 10px;
      font-weight: 500;
    }

    .value {
      font-size: 14px;
    }

    margin-bottom: 20px;
  }
}

.tips {
  font-size: 14px;
  font-weight: bold;
}

.table-row {
  text-align: left;
}
</style>